<template>
  <!--
  使用了 Vue Router 提供的 <router-view> 组件。
  <router-view> 是一个插槽组件，用于展示当前匹配的路由组件（如 /login 或 /dashboard）。
  添加了 :key="routerKey"：
      这是为了在路由切换时强制 Vue 重新创建组件实例，而不是复用同一个组件。
      默认情况下，Vue 会复用组件以提高性能，但有时会导致数据未更新等问题。
  @jenckmin：这个routerKey的作用是用于展示用户界面的，每一个用户的id不同，这个时候就需要routerKey来指定用户自己的页面
  @jenckmin：目前来说应该不需要，是仿照小红书的，删了也行。
  为何需要routerKey：
    假设你有一个用户详情页 /user/:id：
      如果不设置 key，从 /user/1 切换到 /user/2 时，Vue 可能不会销毁并重建组件。
      使用 routerKey 后，组件会重新加载，保证数据和状态正确更新。
  -->
  <router-view :key="routerKey"></router-view>
</template>


<script setup lang="ts">
// 引入 useRoute()：用于获取当前路由信息（如路径、参数等）。
import { useRoute } from 'vue-router'
// 引入 computed：用于创建计算属性，具有缓存和响应式更新能力。
import { computed } from 'vue'//
// 定义路由对象与计算属性
// 创建一个响应式的路由对象 route，可以访问当前页面的路径、参数、查询等信息。
const route = useRoute()
const routerKey = computed(() => route.path)
</script>
<!-- 上面的routerKey那行代码创建了一个计算属性 routerKey，返回当前路由的 path。-->
<!-- @jenckmin：目前还没做用户界面，这个可以不用写，删了也行-->


<style >
  .app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
</style>
